import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      loadingBalance: false
    }
  },
  computed: {
    ...mapState({
      loggedIn: ({ auth }) => auth.loggedIn,
      symbol: ({ exchange }) => exchange.symbol,
      coinPairInfo: ({ market }) => market.coinPairInfo
    })
  },
  watch: {
    loggedIn (val) {
      if (val === true) {
        this.loadBalance()
      }
    },
    symbol (val) {
      if (val) {
        this.lockedPrice = false
        this.loadBalance()
      }
    }
  },
  beforeMount () {
    if (this.loggedIn) {
      this.loadBalance()
    }
  },
  methods: {
    ...mapActions({
      getExchangeBalance: 'fund/getExchangeBalance'
    }),
    loadBalance () {
      if (this.loadingBalance) { return }
      this.loadingBalance = true
      const coinPair = this.coinPairInfo[this.symbol]
      this.getExchangeBalance({ asset_type: [coinPair.stock, coinPair.money].join('|') })
        .finally(() => {
          this.loadingBalance = false
        })
    }
  }
}
